<template>
  <div class="cityList">
    <div class="listBox" v-for="city in cityStore.cityList" :key="city.adcode">
      <div class="cityInfo">
        <h3>{{ city.city }}</h3>
        <span>{{ city.weather?.temperature || '--' }}度</span>
      </div>

      <div class="operationButton">
        <button @click="handleDetail(city)">查看</button>
        <button @click="handleDelete(city)">删除</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useCityStore } from '@/stores/cityStore'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const cityStore = useCityStore()

const handleDetail = (city) => {
  router.push(`/${city.adcode}`)
}

const handleDelete = (city) => {
  ElMessageBox.confirm(
    `确定要删除 ${city.city} 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    cityStore.removeCity(city.adcode)
    ElMessage.success('删除成功')
  }).catch(() => {
    // 取消删除
  })
}
</script>

<style scoped lang="scss">
.cityList {
  margin-top: 40px;
  width: 100%;

  .listBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    &:hover .cityInfo {
      width: 80%;
    }

    &:hover .operationButton {
      display: flex;
    }

    .cityInfo {
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: white;
      padding: .5rem 1rem;
      background-color: rgb(0 78 113 / 1);
      cursor: pointer;
      margin-bottom: 16px;
      transition: width 0.3s ease;

      h3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
      }
    }

    .operationButton {
      display: none;
      justify-content: space-between;
      align-items: center;
      margin-right: 1rem;

      button {
        background-color: rgb(234 179 8 / 1);
        border: none;
        color: white;
        cursor: pointer;
        padding: 0.5rem 1rem;
        font-size: 14px;
        margin-left: 10px;
        width: 80px;
        height: 40px;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
